<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="df fcolumn">
    <header class="infoHeader">
        <div class="container df">
            <span id="backBtn" class="iconfont icon-houtui
            "></span>
            <p class="flex tcenter">个人资料</p>
        </div>


    </header>
    <main class="flex overflow">
        <div class="weui-cells demo_badge_cells">
            <!-- 头部 -->
            <div role="option" aria-labelledby="b1_txt1" aria-describedby="b1_n1"
                class="weui-cell weui-cell_active  weui-cell_access ">
                <div class="weui-cell__bd" aria-hidden="true" id="b1_txt1">
                    <span>更换头像</span>
                </div>
                <div class="weui-cell__hd " aria-hidden="true">
                    <label>
                        <img src="../../assets/imgs/dog.jpg" alt="" id="avatar" class="headPic">
                        <input type="file" id="headFile">
                    </label>
                </div>

                <span class="weui-cell__ft" aria-hidden="true"></span>
            </div>


            <!-- 昵称 -->
            <div role="link" class="weui-cell " > 
                <div class="weui-cell__hd flex"><span class="weui-label">昵称</span></div>
                <div class="weui-cell__bd weui-flex" >
                    <input id="nickName" id="js_input2" class="weui-input" type="text" placeholder="请输入昵称" />
                </div>
            </div>


            <!-- 性别 -->
            <div id="showSexPicker" class="weui-cell weui-cell_access">
                <span class="weui-cell__bd" aria-hidden="true">
                    <span class="demo_badge_title">性别</span>
                </span>
                <span class="weui-cell__ft" id="sex">男</span>
            </div>


            <!-- 生日 -->
            <div class="weui-cell weui-cell_access" id="showDatePicker">
                <span class="weui-cell__bd">
                    <span class="demo_badge_title">生日</span>
                </span>
                <span class="weui-cell__ft" id="birthday">2020-11-11</span>
            </div>

            <!-- 所在省份 -->
            <div class="weui-cell weui-cell_access" id="showPicker">
                <span class="weui-cell__bd">
                    <span class="demo_badge_title">所在省份</span>
                </span>
                <span class="weui-cell__ft" id="province">四川省</span>
            </div>

            <!-- 所在城市 -->
            <div class="weui-cell weui-cell_access" id="showCityPicker">
                <span class="weui-cell__bd">
                    <span class="demo_badge_title">所在城市</span>
                </span>
                <span class="weui-cell__ft" id="city">成都市</span>
            </div>

            <!-- 个人简介 -->
            <div class="weui-cell weui-cell_access weui-cell_active">
                <span class="weui-cell__bd" aria-hidden="true">
                    <span class="demo_badge_title">个人简介</span>
                </span>
            </div>
            <!-- 多行输入 -->
            <div class="weui-cell weui-cell_active">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" id="info" placeholder="多行输入" rows="3"></textarea>
                    <div role="option" aria-live="polite" class="weui-textarea-counter"><span id="currentNum">0</span>/200</div>
                </div>
            </div>

            <!-- 保存信息 -->
            <div class="container saveInfo f20">
                <!-- <button>保存信息</button> -->
                <P id="saveBtn">保存信息</P>

            </div>
        </div>
    </main>

</body>

</html>